<template>
  <el-menu
    :default-openeds="['2', 'good']"
    style="height: 100%"
    background-color="rgb(48,65,86)"
    text-color="#fff"
    :collapse-transition="false"
    :collapse="isCollapse"
    :router="true"
  >
    <div style="height: 60px; margin-left: 30px; line-height: 60px">
      <span
        slot="title"
        style="color: aliceblue; font-size: 20px"
        v-if="!isCollapse"
        >{{ configData.title }}</span
      >
    </div>

    <el-menu-item
      index="/manage/homeMassage"
      class="el-item-menu"
      style="font-size: 16px"
    >
      <i
        v-if="configData.showIcon"
        class="iconfont icon-r-home"
        style="font-size: 24px; color: white"
      ></i>
      <span slot="title">{{ configData.homeTitle }}</span>
    </el-menu-item>

    <el-menu-item
      v-if="configData.showFont"
      index="/"
      class="el-item-menu"
      style="font-size: 16px"
    >
      <i
        v-if="configData.showIcon"
        class="iconfont icon-r-mark1"
        style="font-size: 24px; color: white"
      ></i>
      <span slot="title">{{ configData.fontTitle }}</span>
    </el-menu-item>

    <el-sub-menu index="2" style="font-size: 16px">
      <template #title>
        <i
          v-if="configData.showIcon"
          class="iconfont icon-r-setting"
          style="font-size: 24px; color: white"
        ></i>
        <span>{{ configData.manageTitle }}</span>
      </template>

      <el-sub-menu v-if="userGroup" index="user" class="el-item-menu">
        <template #title>
          <i
            v-if="configData.showIcon"
            class="iconfont icon-r-user2"
            style="font-size: 24px; color: white"
          ></i>
          {{ configData.useManageTitle }}
        </template>
        <el-menu-item index="/manage/user" v-if="menuFlags.userMenu">{{
          configData.useManageTitle
        }}</el-menu-item>
      </el-sub-menu>

      <el-sub-menu
        v-if="fileGroup"
        index="file"
        class="el-item-menu"
        style="font-size: 18px"
      >
        <template #title>
          <i
            v-if="configData.showIcon"
            class="iconfont icon-r-paper"
            style="font-size: 24px; color: white"
          ></i>
          {{ configData.fileTitle }}
        </template>
        <el-menu-item index="/manage/file" v-if="menuFlags.fileMenu">{{
          configData.fileTitle
        }}</el-menu-item>
        <el-menu-item index="/manage/avatar" v-if="menuFlags.avatarMenu">{{
          configData.imgTitle
        }}</el-menu-item>
      </el-sub-menu>

      <el-sub-menu
        v-if="GoodGroup"
        index="good"
        class="el-item-menu"
        style="font-size: 18px"
      >
        <template #title>
          <i
            v-if="configData.showIcon"
            class="iconfont icon-r-find"
            style="font-size: 24px; color: white"
          ></i>
          {{ configData.productTitle }}
        </template>
        <el-menu-item index="/manage/category" v-if="menuFlags.categoryMenu">{{
          configData.productClassifyTitile
        }}</el-menu-item>
        <el-menu-item index="/manage/carousel" v-if="menuFlags.carouselMenu">{{
          configData.swiperTitle
        }}</el-menu-item>
        <el-menu-item index="/manage/good" v-if="menuFlags.goodMenu">{{
          configData.productTitle
        }}</el-menu-item>
        <el-menu-item index="/manage/order" v-if="menuFlags.orderMenu">{{
          configData.orderTitle
        }}</el-menu-item>
      </el-sub-menu>

      <el-sub-menu
        v-if="incomeGroup"
        index="income"
        class="el-item-menu"
        style="font-size: 18px"
      >
        <template #title>
          <i
            v-if="configData.showIcon"
            class="iconfont icon-r-shield"
            style="font-size: 24px; color: white"
          ></i>
          {{ configData.incomeTitle }}
        </template>
        <el-menu-item
          index="/manage/incomeChart"
          v-if="menuFlags.incomeChartMenu"
          >{{ configData.echartTitle }}</el-menu-item
        >
        <el-menu-item
          index="/manage/incomeRank"
          v-if="menuFlags.incomeRankMenu"
          >{{ configData.imcomeListTitle }}</el-menu-item
        >
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { useStore } from "vuex";

const store = useStore();

// Props
const props = defineProps({
  isCollapse: Boolean,
});

// Data
const role = ref<string>("user");
const menuFlags = ref<any>({
  userMenu: false,
  fileMenu: false,
  avatarMenu: false,
  goodMenu: false,
  carouselMenu: false,
  orderMenu: false,
  categoryMenu: false,
  incomeChartMenu: false,
  incomeRankMenu: false,
});

// Computed
const userGroup = computed(() => menuFlags.value.userMenu);
const fileGroup = computed(
  () => menuFlags.value.fileMenu || menuFlags.value.avatarMenu
);
const GoodGroup = computed(
  () =>
    menuFlags.value.goodMenu ||
    menuFlags.value.orderMenu ||
    menuFlags.value.categoryMenu ||
    menuFlags.value.carouselMenu
);
const incomeGroup = computed(
  () => menuFlags.value.incomeChartMenu || menuFlags.value.incomeRankMenu
);

// Config data from store
const configData = computed(() => store.state.configData);

// Lifecycle
onMounted(() => {
  store.state.request.post("http://localhost:9191/role").then((res: any) => {
    if (res.code === "200") {
      role.value = res.data;
      console.log("asider，role：" + role.value);

      if (role.value === "admin") {
        menuFlags.value = {
          userMenu: true,
          fileMenu: true,
          avatarMenu: true,
          categoryMenu: true,
          goodMenu: true,
          carouselMenu: true,
          orderMenu: true,
          incomeChartMenu: true,
          incomeRankMenu: true,
        };
      } else if (role.value === "user") {
        // User specific flags if needed
      }
      console.log(menuFlags.value);
    }
  });
});
</script>

<style scoped>
/* Add your styles here */
</style>
